<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dialog{
            width: 100%;
            height: 100%;
            position: absolute;
            left:0px;
            top: 0px;
            background-color: rgba(255,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
        .content{
            width: 600px;
            height: 300px;
            border: 2px solid #000;
            background-color: white;
            padding: 20px;
        }
    </style>
    <script src="/axios.min.js"></script>
    <script src="/goods.js"></script>
</head>
<body>
    <input type="button" value="添加" onclick="$('addDiv').style.visibility = 'visible'">
    <table border="1" width="60%" cellspacing="0">
      <thead>
        <tr><th>编号</th><th>商品名</th><th>生产日期</th><th>单价</th><th>操作</th></tr>
      </thead>

      <tbody id="data"></tbody>
    </table>
    <div id="cutPageDiv"></div>
    商品名：<input type="text" id="serchName"><br>
    起始日期：<input type="text" id="startDate"><br>
    结束日期：<input type="text" id="endDate"><br>
    <input type="button" value="搜索" onclick="findByItem(1)">

    <div id="addDiv" class="dialog">
        <div class="content">
            商品名：<input type="text" id="addName"><br>
            生产日期：<input type="text" id="addCreateDate"><br>
            单价：<input type="text" id="addPrice"><br>
            <input type="button" value="添加" onclick="addGoods()">
        </div>
    </div>

    <div id="updateDiv" class="dialog">
        <div class="content">
            <input type="hidden" id="goodId">
            商品名：<span id="nameSpan"></span><br>
            生产日期：<span id="createDateSpan"></span><br>
            单价：<input type="text" id="updatePrice"><br>
            <input type="button" value="修改" onclick="updateGoods()">
        </div>
    </div>

</body>
</html>